<template>
	<view class="backdrop">
		<view class="datou">
			<image class="fanhui" :src="imageUrl + '/tesewuchan/tesewuchanfanhui2.png'" mode="" @click="handleClick"></image>
			<p class="toubu">永顺莓茶</p>
		</view>
		
		<view class="shipingg">
			<z-swiper v-model="list" :options="options" @slideChange="onChange" ref="zSwiper">
		  	<z-swiper-item v-for="(item,index) in list" :key="index">
		  		<video class="image" :src="item" mode="aspectFill" controls></video>
		  		<!-- <image class="image" :src="item" mode="aspectFill"></image> -->
				<template #indicator>
					<view class="custom-indicator">{{ current + 1 }}/{{list.length}}</view>
				</template>
		  	</z-swiper-item>
		  </z-swiper>
		  
		</view>
		<view class="dadadad">
			<view class="slider">这不是我家那边吗？</view>
		</view>
		
		<view class="dadadad2">
			<view class="slider2">哇，居然还可以这样</view>
		</view>
		 
		
		<view class="zhenwen">
			<view class="containers">
				<image @click="showPhotoGallery = true" :src="mainImageUrl" class="main-image"></image>
				       <view v-if="showPhotoGallery" class="photo-gallery-modal">
						   <view class="prev-arrow">
								<image @click="currentPhotoIndex--" :src="prevArrowUrl" class="prev-arrowhe" v-if="currentPhotoIndex > 0"></image>
						   </view>
				         <image :src="photoList[currentPhotoIndex]" class="photo-item-modal"></image>
						 <view class="next-arrow">
				         <image @click="currentPhotoIndex++" :src="nextArrowUrl" class="next-arrowhe" v-if="currentPhotoIndex < photoList.length - 1"></image>	
						 </view>
						 <image @click="closePhotoGallery" :src="imageUrl + '/tesewuchan/Frame2x.png'" class="close-button"></image>
				       </view>
			</view>
			<!-- <image class="photoAlbum" :src="imageUrl + '/tesewuchan/tesewuchanzhaopianji.png'" mode=""></image> -->
			<p class="zhenwenbiaoti">永顺莓茶</p>
			<image class="ditubiao" :src="imageUrl + '/tswc/dibiao.png'" mode=""></image>
			<view class="dian1"></view>
			<view class="dian2"></view>
			<p class="dituwen">湖南 湘西州 永顺新场</p>
			<image class="ditu" :src="imageUrl + '/tswc/ditu.png'" mode=""></image>
			<p yinwen>“莓茶轻舞舌尖，唤醒沉睡的味蕾，感受来 自深 山的清新呼唤”</p>
			<span class="wenzi">永顺莓茶，湖南省湘西土家族苗族自治州永顺县 特产，全国农产品地理标志。其具有
				<span style="color: #d9a054;">条索紧细、白霜满披、香气清甜、黄亮清澈、醇厚回甘、嫩黄明亮</span>的特点。
			</span>
			<image class="tupian" :src="imageUrl + '/tswc/cao.png'" mode=""></image>
			<p class="fubiaoti">产地环境</p>
			<p class="wenzi2">永顺莓茶种植区域位于武陵山脉中段，森林覆盖 率80%以上;属亚热带季风气候，四季分明;沅水、 澧水贯穿全境，大小河流182条，山泉水、地下水 资源丰富;土壤以黄红沙土为主，土层深厚，土质 肥沃。独特的自然生态环境有利于永顺莓茶氨基 酸、二氢杨梅素及黄酮类化合物积累，形成了永 顺莓茶的独特品质。</p>
			<image class="tupian" :src="imageUrl + '/tswc/dashan.png'" mode=""></image>
			<p class="fubiaoti">制作流程</p>
			<p class="wenzi22">鲜叶摊放>杀青>揉捻→松包→闷青→摊晾起霜→ 提香→包装→成品</p>
			<image class="tupian1" :src="imageUrl + '/tswc/siliao.png'" mode=""></image>
			<image class="goumai" :src="imageUrl + '/tswc/wxianggomai.png'" mode=""></image>
			<p class="xianyao">66人想要|500浏览</p>
			<view class="xian1"></view>
			<p class="jieshu">结束</p>
			<view class="xian2"></view>
		</view>
		<view class="henlan"></view>
		<view class="zhenwen">
			<p class="liuyan">留言墙</p>
			<p class="shuliang">20条</p>
			<view class=""></view>
			<image class="touxiang" :src="imageUrl + '/tesewuchan/tesewuchantouxianmg.png'" mode=""></image>
			<input
			 v-model="inputValue"
			 class="my-input"
			 type="text"
			 placeholder="快来留言吧，留下你的独特印记!"
			 @confirm="addMessage"/>
			<image class="messageBox" :src="imageUrl+'/tswc/bianji.png'" mode=""></image>
			 <view class="pinlunqu">
			 		 
			 		 <image class="touxiang" style="margin-top: 60rpx;" :src="imageUrl + '/tesewuchan/tesewuchantouxianmg.png'" mode=""></image>
			 		 <p class="travel">旅行者</p>
			 		 <image class="like" :src="imageUrl + '/tesewuchan/tesewuchandianzan.png'" mode=""></image>
			 		 <p class="comment">厉害了</p>
			 		 <view class="day">
			 		 	<span style="color: #bfbfbf;font-size: 20rpx;">2024-08-08</span>
			 		 	<span style="color: #bfbfbf;font-size: 20rpx;margin-left: 10rpx;">长沙</span>
			 		 </view>
					<p class="zanshu" >23</p>
			 	<view class="pinlunxian"></view>
			 	<view class="zhenwen">
			 		 	<image class="touxiang" style="margin-top: 60rpx;" :src="imageUrl + '/tesewuchan/tesewuchantouxianmg.png'" mode=""></image>
			 		 <p class="travel">旅行者</p>
			 		 <image class="like" :src="imageUrl + '/tesewuchan/tesewuchandianzan.png'" mode=""></image>
			 		 <p class="comment">厉害了</p>
			 		 <view class="day">
			 		 	<span style="color: #bfbfbf;font-size: 20rpx;">2024-08-08</span>
			 		 	<span style="color: #bfbfbf;font-size: 20rpx;margin-left: 10rpx;">长沙</span>
			 		 </view>
					 <p class="zanshu" >23</p>
			 	</view>
				<view class="pinlunxian"></view>
				<view class="zhenwen">
					 	<image class="touxiang" style="margin-top: 60rpx;" src="https://xnlv.lizxx.com/image/xnlv/static/tesewuchan/tesewuchantouxianmg.png" mode=""></image>
					 <p class="travel">旅行者</p>
					 <image class="like" :src="imageUrl + '/tesewuchan/tesewuchandianzan.png'" mode=""></image>
					 <p class="comment">厉害了</p>
					 <view class="day">
					 	<span style="color: #bfbfbf;font-size: 20rpx;">2024-08-08</span>
					 	<span style="color: #bfbfbf;font-size: 20rpx;margin-left: 10rpx;">长沙</span>
					 </view>
					<p class="zanshu" >23</p>
				</view>
			 </view>
			 </view>
		<view class="block">
			<p style="text-align: center;line-height: 90rpx;color: #808d84;">查看全部评论</p>
			<view style="height: 158rpx;"></view>
			<image class="bibubu" :src="imageUrl + '/tesewuchan/tesewuchandibudaohang.png'" mode=""></image>
			
		</view>
	</view>
</template>

<script>
	export default {
		data(){
		return{
			mainImageUrl: 'https://xnlv-test.lizxx.com/image/xnlv/static/tesewuchan/tesewuchanzhaopianji.png',//初始图片
			showPhotoGallery: false,
			currentPhotoIndex: 0,
			prevArrowUrl: 'https://xnlv-test.lizxx.com/image/xnlv/static/tesewuchan/Group28121.png',//左箭头
			nextArrowUrl: 'https://xnlv-test.lizxx.com/image/xnlv/static/tesewuchan/Group2812.png',//右箭头
			
			 photoList: [
			           	'https://xnlv-test.lizxx.com/image/xnlv/static/tesewuchan/17275786005634.png',
			           	'https://xnlv-test.lizxx.com/image/xnlv/static//tesewuchan/17275786213707.png',
			           'https://xnlv-test.lizxx.com/image/xnlv/static/tesewuchan/17275786396625.png',
			           	'https://xnlv-test.lizxx.com/image/xnlv/static/tesewuchan/17275786583696.png',
			           // 添加更多照片地址
			         ],
			
			page5PreviousParam: '',
			imageUrl: this.$imageUrl,
		inputValue: '',
		current: 0,
		options: {
			// effect: 'fade',
			pagination: {
			el: true,
			type: 'fraction',
				},
			fadeEffect: {
				crossFade: true
			},
		},
		list: [
		        'https://xnlv-test.lizxx.com/image/xnlv/static/tesewuchan/caichaMP4.mp4',
		        'https://xnlv-test.lizxx.com/image/xnlv/static/tesewuchan/caicha3.mp4',
		        'https://xnlv-test.lizxx.com/image/xnlv/static/tesewuchan/caicha4.mp4',
		        'https://xnlv-test.lizxx.com/image/xnlv/static/tesewuchan/meichashiping.mp4',
		      ],
		currentIndex: 0,
			}
		},
		onLoad(options) {
		   // 获取跳转传递过来的参数
		   this.page5PreviousParam = options.fromPage;
		   console.log('page5PreviousParam', this.page5PreviousParam)
		},
		methods: {
			handleClick() {
			    if (this.page5PreviousParam) {
			        wx.redirectTo({
			            url: `/${this.page5PreviousParam}`
			        });
			    } else {
			        wx.redirectTo({
			            url: '/pagesNew/pages-special-local/pages-special-products/tea-drink',
			        });
			    }
			},
		onChange(swiper, index) {
			this.current = this.$refs.zSwiper.swiper.activeIndex;
		},
		changSwiper(index) {
			if (index != this.current1) {
				this.$refs.zSwiper1.swiper.slideTo(index, 300, false);
			}
		},
		closePhotoGallery() {
		         this.showPhotoGallery = false;
		       },
		
		}
	};
</script>

<style>
	
	
	.close-button {
		/* 关闭按钮 */
		width: 62rpx;
		height: 62rpx;
		margin-top: 20rpx;
	}
	.containers {
	       /* 容器的整体样式 */
	       display: flex;
	       flex-direction: column;
	       align-items: center;
		   z-index: 100;
	   }
	  .main-image {
	       /* 主图片的样式 */
	       width: 80rpx;
	       	height: 80rpx;
		   z-index: 98;
		   position: relative;
		   top: 89rpx;
		   left: 240rpx;
	   }
	  .photo-gallery-modal {
	       /* 照片集弹窗的样式 */
	       position: fixed;
	       top: 0;
	       left: 0;
	       right: 0;
	       bottom: 0;
	       background-color: rgba(0, 0, 0, 0.5);
	       display: flex;
	       flex-direction: column;
	       justify-content: center;
	       align-items: center;
		   z-index: 100;
	   }
	  .prev-arrow{
		  /* 左箭头的样式 */
		  width: 60rpx;
		  height: 60rpx;
		  cursor: pointer;
		  z-index: 101;
		  /* position: absolute;
		  left: 0;
		  top: 47%; */
	  }
	  .prev-arrowhe {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			background-color: rgba(0,0,0,0.4);
			z-index: 101;
			position: absolute;
			left: 0;
			top: 47%;
			/* padding-top: 5rpx; */
			padding-right: 5rpx;
	  }
	  .next-arrow {
	       /* 右箭头的样式 */
	       width: 60rpx;
	       height: 60rpx;
	       cursor: pointer;
		   margin-left: 5rpx;
		   z-index: 101;
		   /* position: absolute;
		   	right: 0;
		   	top: 47%; */
	   }
	   .next-arrowhe {
		   width: 50rpx;
		   height: 50rpx;
		   border-radius: 50%;
		   background-color: rgba(0,0,0,0.4);
		   z-index: 101;
			position: absolute;
			right: 0;
			top: 47%;
			/* padding-top: 5rpx; */
			padding-left: 5rpx;
	   }
	  .photo-item-modal {
	       /* 弹窗中照片的样式 */
	       width: 100vw;
	       height: 30vh;
		   z-index: 100;
	   }
	
	.backdrop {
	    /* background-color: #f2f2f2; */
	    height: 100vh;
	    width: 100vw;
	    position: fixed;
	    top: 0;
	    left: 0;
	    overflow: auto;
	    overflow-x: hidden;
	}
	.photoAlbum {
	    width: 80rpx;
	    height: 80rpx;
	    display: inline-block;
	    /* margin-left: 560rpx;
	    margin-top: -260rpx; */
	    position: relative;
	    top: 90rpx;
	    left: 570rpx;
	}
	.zanshu {
	    color: #bfbfbf;
	    font-size: 20rpx;
	    position: relative;
	    left: 590rpx;
	    top: -30rpx;
	}
	.messageBox {
	    width: 32rpx;
	    height: 32rpx;
	    position: relative;
	    left: -50rpx;
	    top: -16rpx;
	}
	.dadadad2 {
	    width: 100vw;
	    margin-top: -400rpx;
	    z-index: 98;
	    position: absolute;
	    opacity: 0.7;
	}
	.dadadad {
	    width: 100vw;
	    margin-top: -440rpx;
	    z-index: 98;
	    position: absolute;
	    opacity: 0.7;
	}
	.slider2 {
	    width: 320rpx;
	    height: 46rpx;
	    padding-top: 4rpx;
	    padding-left: 20rpx;
	    color: white;
	    background-color: #888888;
	    position: relative;
	    margin-left: 100%;
	    animation: slideFromRight2 12s linear infinite;
	    border-radius: 40rpx;
	}
	@keyframes slideFromRight2 {
	    from {
	        opacity: 1;
	        right: -200%;
	    }
	    to {
	        opacity: 1;
	        right: 300%;
	    }
	}
	.slider {
	    width: 300rpx;
	    height: 46rpx;
	    padding-top: 4rpx;
	    padding-left: 20rpx;
	    color: white;
	    background-color: #888888;
	    position: relative;
	    margin-left: 100%;
	    animation: slideFromRight 8s linear infinite;
	    border-radius: 40rpx;
	}
	@keyframes slideFromRight {
	    from {
	        opacity: 1;
	        right: 0%;
	    }
	    to {
	        opacity: 1;
	        right: 300%;
	    }
	}
	.shipingg {
	    margin-top: 240rpx;
	    z-index: 1;
	}
	.bibubu {
	    width: 750rpx;
	    height: 158rpx;
	    position: fixed;
	    bottom: 0;
	    z-index: 98;
	}
	.container {
	    position: relative;
	}
	.image {
	    width: 100vw;
	    height: 440rpx;
	}
	.swiper-pagination-fraction.data-v-2ff4d8de,.swiper-pagination-custom.data-v-2ff4d8de,.swiper-horizontal >.swiper-pagination-bullets.data-v-2ff4d8de,.swiper-pagination-bullets.swiper-pagination-horizontal.data-v-2ff4d8de {
	    bottom: 20rpx;
	    left: 88%!important;
		/* right: 10%!important; */
	    width: 9%!important;
	    height: 8%!important;
		color: white;
		padding-top: 1%;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		background-color: rgba(0, 0, 0, 0.5);
		
	}
	
	.custom-indicator {
	    position: absolute;
	    right: 0!important;
	    bottom: 60rpx;
	    padding: 8rpx 20rpx;
	    font-size: 48rpx;
	    color: #FFFFFF;
	    background: rgba(0, 0, 0, 0.1);
	    z-index: 10;
	}
	.image-index {
	    position: absolute;
	    bottom: 20rpx;
	    right: 20rpx;
	    font-size: 24rpx;
	}
	.pinlunxian {
	    width: 750rpx;
	    height: 0rpx;
	    border-radius: 0px 0px 0px 0px;
	    border: 2rpx solid rgba(64,112,114,0.1);
	}
	.block {
	    width: 100vw;
	    height: 90rpx;
	    background-color: #e4ebe9;
	}
	.day {
	    margin-left: 80rpx;
	}
	.comment {
	    font-size: 24rpx;
	    color: #545454;
	    display: inline-block;
	    margin-left: -90rpx;
	}
	.travel {
	    font-size: 20rpx;
	    color: #808d84;
	    font-weight: 560;
	    display: inline-block;
	    position: relative;
	    top: -40rpx;
	    left: 20rpx;
	}
	.like {
	    width: 42rpx;
	    height: 42rpx;
	    display: inline-block;
	    position: relative;
	    top: 20rpx;
	    left: 462rpx;
	}
	.bianji {
	    width: 32rpx;
	    height: 32rpx;
	    position: relative;
	    top: -14rpx;
	    left: -60rpx;
	}
	.touxiang {
	    width: 60rpx;
	    height: 60rpx;
	    border-radius: 60rpx 60rpx 60rpx 60rpx;
	    display: inline-block;
	}
	.shuliang {
	    /* width: 60rpx; */
	    height: 42rpx;
	    font-family: Source Han Sans CN, Source Han Sans CN;
	    font-weight: 400;
	    font-size: 28rpx;
	    color: #AAAAAA;
	    line-height: 32rpx;
	    text-align: left;
	    font-style: normal;
	    text-transform: none;
	    display: inline-block;
	    margin-left: 20rpx;
	}
	.liuyan {
	    width: 96rpx;
	    height: 48rpx;
	    font-family: Source Han Sans CN, Source Han Sans CN;
	    font-weight: bold;
	    font-size: 32rpx;
	    color: #808D84;
	    line-height: 38rpx;
	    text-align: left;
	    font-style: normal;
	    text-transform: none;
	    display: inline-block;
		margin-top: 30rpx;
		margin-bottom: 20rpx;
	}
	.henlan {
	    width: 750rpx;
	    height: 20rpx;
	    background: #E4EBE9;
	    border-radius: 0px 0px 0px 0px;
		margin-bottom: 20rpx;
		margin-top: -100rpx;
	}
	.jieshu {
	    width: 48rpx;
	    height: 36rpx;
	    font-family: Source Han Sans CN, Source Han Sans CN;
	    font-weight: 400;
	    font-size: 24rpx;
	    color: #AAAAAA;
	    line-height: 28rpx;
	    text-align: left;
	    font-style: normal;
	    text-transform: none;
	    position: relative;
	    top: -200rpx;
	    left: 300rpx;
	}
	.xian1 {
	    width: 72rpx;
	    height: 0rpx;
	    border-radius: 0px 0px 0px 0px;
	    border: 2rpx solid rgba(64,112,114,0.3);
	    position: relative;
	    top: -183rpx;
	    left: 210rpx;
	}
	.xian2 {
	    width: 72rpx;
	    height: 0rpx;
	    border-radius: 0px 0px 0px 0px;
	    border: 2rpx solid rgba(64,112,114,0.3);
	    position: relative;
	    top: -220rpx;
	    left: 380rpx;
	}
	.xianyao {
	    /* width: 44px; */
	    height: 36rpx;
	    font-family: Source Han Sans CN, Source Han Sans CN;
	    font-weight: 400;
	    font-size: 24rpx;
	    color: #808D84;
	    line-height: 28rpx;
	    text-align: left;
	    font-style: normal;
	    text-transform: none;
	    position: relative;
	    top: -230rpx;
	    left: 230rpx;
	}
	.goumai {
	    width: 351.16rpx;
	    height: 88.88rpx;
	    position: relative;
	    top: -260rpx;
	    left: 160rpx;
	}
	.wenzi22 {
	    width: 672rpx;
	    height: 380rpx;
	    font-family: Source Han Sans CN, Source Han Sans CN;
	    font-weight: 400;
	    font-size: 32rpx;
	    color: #666666;
	    line-height: 54rpx;
	    text-align: left;
	    font-style: normal;
	    text-transform: none;
	}
	.wenzi2 {
	    width: 672rpx;
	    height: 432rpx;
	    font-family: Source Han Sans CN, Source Han Sans CN;
	    font-weight: 400;
	    font-size: 32rpx;
	    color: #666666;
	    line-height: 54rpx;
	    text-align: left;
	    font-style: normal;
	    text-transform: none;
	}
	.fubiaoti {
	    width: 144rpx;
	    height: 52rpx;
	    font-family: Source Han Sans CN, Source Han Sans CN;
	    font-weight: 500;
	    font-size: 36rpx;
	    color: #444444;
	    line-height: 52rpx;
	    text-align: left;
	    font-style: normal;
	    text-transform: none;
	    margin-top: 32rpx;
	}
	.tupian {
	    width: 675.82rpx;
	    height: 458rpx;
	}
	.tupian1 {
	    width: 675.82rpx;
	    height: 458rpx;
	    position: relative;
	    top: -280rpx;
	}
	.wenzi {
	    width: 672rpx;
	    height: 270rpx;
	    font-family: Source Han Sans CN, Source Han Sans CN;
	    font-weight: 400;
	    font-size: 32rpx;
	    color: #666666;
	    line-height: 54rpx;
	    text-align: left;
	    font-style: normal;
	    text-transform: none;
	}
	.yinwen {
	    width: 684rpx;
	    height: 104rpx;
	    font-family: Source Han Sans CN, Source Han Sans CN;
	    font-weight: 500;
	    font-size: 36rpx;
	    color: #444444;
	    line-height: 52rpx;
	    text-align: left;
	    font-style: normal;
	    text-transform: none;
	}
	.dian1 {
	    width: 8rpx;
	    height: 8rpx;
	    background: #3F5649;
	    border-radius: 6rpx 6rpx 6rpx 6rpx;
	    display: inline-block;
	    position: relative;
	    left: 73rpx;
	    top: -5rpx;
	}
	.dian2 {
	    width: 8rpx;
	    height: 8rpx;
	    background: #3F5649;
	    border-radius: 6rpx 6rpx 6rpx 6rpx;
	    display: inline-block;
	    position: relative;
	    left: 159rpx;
	    top: -5rpx;
	}
	.dituwen {
	    width: 290rpx;
	    height: 52rpx;
	    font-family: Source Han Sans CN, Source Han Sans CN;
	    font-weight: 400;
	    font-size: 28rpx;
	    color: #3F5649;
	    line-height: 52rpx;
	    text-align: left;
	    font-style: normal;
	    text-transform: none;
	    display: inline-block;
	    /* position: relative;
	    top: -70rpx;
	    left: 30rpx; */
	}
	.ditu {
	    width: 64.6rpx;
	    height: 64.6rpx;
	    display: inline-block;
	    position: relative;
	    top: 20rpx;
	}
	.ditubiao {
	    width: 19.16rpx;
	    height: 19.16rpx;
	    display: inline-block;
	}
	.zhenwenbiaoti {
	    width: 192rpx;
	    height: 52rpx;
	    font-family: Source Han Sans CN, Source Han Sans CN;
	    font-weight: 500;
	    font-size: 48rpx;
	    color: #444444;
	    line-height: 52rpx;
	    text-align: left;
	    font-style: normal;
	    text-transform: none;
	}
	.zhenwen {
	    width: 672rpx;
	    margin: 0 auto 0;
		margin-top: -35rpx;
	}
	.shiping {
	    margin-top: 172.98rpx;
	    width: 750rpx;
	    height: 442rpx;
	    border-radius: 0px 0px 0px 0px;
	}
	.datou {
	    width: 100vw;
	    position: fixed;
	    height: 172.98rpx;
	    background-color: white;
	    z-index: 99;
	    top: 0;
	}
	.toubu {
	    width: 128rpx;
	    height: 48rpx;
	    font-family: Source Han Sans CN, Source Han Sans CN;
	    font-weight: 500;
	    font-size: 32rpx;
	    color: #3F5649;
	    line-height: 38rpx;
	    text-align: center;
	    font-style: normal;
	    text-transform: none;
	    margin: 0 auto 0;
	    margin-top: 120rpx;
	}
	.fanhui {
	    width: 38rpx;
	    height: 38rpx;
	    margin-top: 120rpx;
	    margin-left: 20rpx;
	    position: fixed;
	}
	.my-input {
	    z-index: 2;
	    width: 505rpx;
	    height: 60rpx;
	    /* margin-top: 90rpx; */
	    margin-left: 18rpx;
	    padding-left: 30rpx;
	    background: #E4EBE9;
	    border-radius: 200rpx;
	    font-size: 28rpx;
	    color: black;
		background-repeat: no-repeat;
		background-position: right center;
		padding-right: 20rpx;
		display: inline-block;
	}
</style>